import {useState} from 'react'
import { Tabbar } from 'react-vant'
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons'
import {useNavigate,Outlet} from 'react-router-dom'
export default function Home() {
  const navigate = useNavigate()
  const [name, setName] = useState('home')
  return (
    <>
      <Outlet />
      <div style={{ position: 'fixed', bottom: 0, left: 0, width: '100%',height: '50px'}}>
        <Tabbar value={name} onChange={v => setName(v)}>
          <Tabbar.Item name='home' onClick={() => navigate('/home')} icon={<HomeO />}>
            首页
          </Tabbar.Item>
          <Tabbar.Item name='search' onClick={() => navigate('/home/cate')} icon={<Search />}>
            收藏
          </Tabbar.Item>
          <Tabbar.Item name='firends' onClick={() => navigate('/home/car')} icon={<FriendsO />}>
            订单
          </Tabbar.Item>
          <Tabbar.Item name='setting' onClick={() => navigate('/home/my')} icon={<SettingO />}>
            我的
          </Tabbar.Item>
        </Tabbar>
      </div>
      
    </>
  )
}